<script>
    export default {
        name: "Person",
        setup() {
            console.log(this) //setup中的this是undefined，Vue3在弱化this了
            // 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
            let name = '张三1';
            let age = 19;

            //方法
            function changeName() {
                //this.name = 'zhang-san';
                name = 'zhang-san'; //注意：这样修改name，页面是没有变化的
                console.log(name);//name确实改了，但name不是响应式的
            }

            function changeAge() {
                //this.age += 1;
                age += 1; //注意：这样修改age，页面是没有变化的
                console.log(age) //age确实改了，但age不是响应式的
            }

            //将数据和方法交出去，模版中才能使用
            return {name, age, changeName, changeAge};
        }
    }
</script>

<template>
	<div class="person">
		<h2>姓名: {{ name }}</h2>
		<h2>年龄: {{ age }}</h2>
		<button @click="changeName">修改名字</button>
		<button @click="changeAge">修改年龄</button>
	</div>
</template>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }
</style>